<template>
  <div class="day4">
    <div class="show-area">
      <div class="text">{{showText}}</div>
      <div class="ctrl">
        <div class="sec">
          <span>text:</span>
          <el-input v-model="originText"
                    placeholder=""
                    size="default"
                    clearable></el-input>
        </div>
        <div class="sec">
          <span>speed:</span>
          <el-input v-model.number="speed"
                    placeholder=""
                    size="default"
                    clearable></el-input>
        </div>
      </div>
      <h3>shift+enter换行 enter发送</h3>
      <el-input v-model="textarea"
                :rows="2"
                type="textarea"
                placeholder="Please input"
                @keydown.enter="pressEnter" />
      <!-- vue3中 子组件未使用emits暴露的事件，父组件监听的默认就是子组件的根部事件（等价于vue2的.native） -->
      <!-- @keydown.enter.native="pressEnter" -->
      <h3>alt+enter换行 enter发送</h3>
      <el-input v-model="textarea2"
                :rows="2"
                type="textarea"
                placeholder="ctrl+enter  alt+enter默认都不会换行 通过监听事件发送消息. 唯独shift不行，会触发事件并换行"
                @keydown.alt.enter="pressAltEnter"
                @keydown.enter.exact="pressEnter2" />
      <div>
        alt+enter 默认不会换行 不是@keyup.alt.enter的作用，它只是在这俩按键按下时 触发事件
      </div>
    </div>
    <div class="tips">
      <div>1、通过 <span class="my-tip">函数setTimout函数自身</span> 可实现定时参数每次执行都刷新,setInerval在第一次执行时 周期已经定死了，修改也没用
        除非重新运行</div>
      <div>2、string的slice end是不包含的</div>
      <div>3、数值越大，计数越小，通过 base/setNum 来实现</div>
      <div>4、父级高度是min-height时 子height:100%无效</div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { ElNotification } from 'element-plus'

const originText = ref('这是初始的文字。。。'),
  speed = ref(1)
const showText = ref('')
let num = 1
function typeWord() {
  if (num < originText.value.length + 1) {
    //slice(start（包含）,end（不包含）)
    showText.value = originText.value.slice(0, num)
    num++
  } else {
    num = 1
  }
  // 使用timeout 不用interval的好处是 每个周期都重新执行函数 修改速度后 它会同步改下一个定时器时的速度
  setTimeout(typeWord, 1000 / speed.value)
}
typeWord()
// setInterval(typeWord, speed.value * 100)

const textarea = ref(''),
  textarea2 = ref('')
function pressEnter(e) {
  // event.preventDefault()会导致enter换行永远不能触发shift+enter也失效
  console.log(e)
  if (e.shiftKey) {
    return
  } else {
    e.returnValue = false //只按enter 阻止换行 并发送输入的值

    ElNotification({
      title: 'Success',
      message: textarea.value,
      type: 'success',
    })
  }
}

// 比shift+enter换行（默认就能换） 多增加一个换行操作
function pressAltEnter() {
  textarea2.value += '\n'
}

function pressEnter2(e) {
  e.returnValue = false //只按enter 阻止换行 并发送输入的值

  ElNotification({
    title: 'Success',
    message: textarea2.value,
    type: 'success',
  })
}
</script>

<style lang="scss" scoped>
.day4 {
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;

  .show-area {
    width: 500px;

    .text {
      padding: 10px 20px;
      font-size: 18px;
      line-height: 18px;
      text-align: center; //赋予灵魂
    }
  }
}
</style>